<template>
  <div class="huawei_comtainer">
    <Header />
    <Swiper />
    <div class="huawei_wrapper">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="6" 
        v-for="(item,index) in list" :key="index">
          <div class="grid-content bg-purple list_item">
            <div class="item_img"><img :src="item.img" alt=""></div>
            <div class="item_title">{{item.title}}</div>
            <div class="item_introduce">{{item.introduce}}</div>
            <div class="item_price">￥{{item.price}}</div>
            <div class="cart_button" @click="addCart(item)">加入购物车</div>
          </div>
        </el-col>
      </el-row>
      <div @click="toCart">跳转购物车</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Header from "../components/Header";
import Swiper from "../components/Swiper";

export default {
  name: "Home",
  components: {
    Header,
    Swiper
  },
  data() {
    return {
      list: []
    };
  },
  methods:{
    toCart(){
      this.$router.push('/cart')
    },
    addCart(item){
      this.$store.dispatch('ADD_CART',item)
    }
  },
  mounted() {
    axios
      .get("http://localhost:8080/data.json")
      .then(res => {
        console.log(res.data.lists);
        this.list = res.data.lists;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.huawei_comtainer {
  width: 100%;
}
.huawei_wrapper {
  width: 84%;
  margin-left: 8%;
}
.list_item div {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
} 
.list_item {
  width: 100%;
  height: 500px;
}
.item_introduce {
  color: gray;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.item_price {
  color: red;
}
.item_img {
  width: 100%;
}
.item_img img{
  width: 100%;
  height: 290px;
}
.item_title {
  width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cart_button {
  width: 94%;
  margin-left: 3%;
  height: 40px;
  background-color: red;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}


</style>